<template>
  <div class="Note u-absolute-flex-column">
    <header class="app-header">
      <div class="u-flex-row">
        <a class="back-button" @click="goBack()"><i class="el-icon-arrow-left"></i></a>
        <div class="menu-text u-elastic">Viewing Note</div>
        <a @click="editNote()"><i class="el-icon-edit"></i></a>
        <a @click="deleteNote()"><i class="el-icon-delete"></i></a>
      </div>
    </header>
    <div class="u-scroller">
      <div class="content">
        {{ note.title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      note: {},
    };
  },
  methods: {
    loadNote() {
      // Load a single note with id based on whatever storage methodology we pick
      this.note = { title: 'A new note', meta: 'Added 2 days ago', id: '1' };

        this.$http.get('http://tomcat.yuananan.cn/air/music/list').then(response => {
            // success callback
                            console.log(response);
                alert(JSON.stringify(response));
        }, response => {
            // error callback
            alert(JSON.stringify(response));
        });        

    },
    goBack() {
      this.$router.push('/');
    },
    editNote() {
      // Logic to edit a note
      this.$router.push({ name: 'Edit Note', params: { id: this.note.id } });
    },
    deleteNote() {
      // Logic to delete note
      this.$router.push('/');
    }
  },
  mounted() {
    this.loadNote();
  },
};
</script>

<style scoped>
.content {
  padding: 25px;
  font-size: 14px;
  line-height: 21px;
}
</style>